<template>
  <div class="connections-container">
    <el-card class="connection-form">
      <template #header>
        <div class="card-header">
          <span>添加新连接</span>
        </div>
      </template>
      <el-form :model="connectionForm" label-width="120px">
        <el-form-item label="连接名称">
          <el-input v-model="connectionForm.name" placeholder="请输入连接名称"></el-input>
        </el-form-item>
        <el-form-item label="数据库类型">
          <el-select v-model="connectionForm.dbType" placeholder="请选择数据库类型">
            <el-option label="MySQL" value="mysql"></el-option>
            <el-option label="Oracle" value="oracle"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="连接地址">
          <el-input v-model="connectionForm.url" placeholder="请输入连接地址"></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="connectionForm.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="connectionForm.password" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addConnection">添加连接</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="connection-list">
      <template #header>
        <div class="card-header">
          <span>连接列表</span>
        </div>
      </template>
      <el-table :data="connections" style="width: 100%">
        <el-table-column prop="name" label="连接名称"></el-table-column>
        <el-table-column prop="dbType" label="数据库类型"></el-table-column>
        <el-table-column prop="url" label="连接地址"></el-table-column>
        <el-table-column prop="username" label="用户名"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" @click="switchConnection(scope.row.id)">切换</el-button>
            <el-button type="danger" @click="removeConnection(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { connectionApi } from '@/api'

const connections = ref([])
const connectionForm = ref({
  name: '',
  dbType: '',
  url: '',
  username: '',
  password: ''
})

const loadConnections = async () => {
  try {
    const response = await connectionApi.getAllConnections()
    if (Array.isArray(response.data)) {
      connections.value = response.data
    } else {
      connections.value = []
      ElMessage.warning('获取连接列表失败：返回数据格式不正确')
    }
  } catch (error) {
    ElMessage.error('加载连接列表失败')
  }
}

const addConnection = async () => {
  try {
    await connectionApi.addConnection(connectionForm.value)
    ElMessage.success('添加连接成功')
    connectionForm.value = {
      name: '',
      dbType: '',
      url: '',
      username: '',
      password: ''
    }
    loadConnections()
  } catch (error) {
    ElMessage.error('添加连接失败')
  }
}

const removeConnection = async (id) => {
  try {
    await connectionApi.deleteConnection(id)
    ElMessage.success('删除连接成功')
    loadConnections()
  } catch (error) {
    ElMessage.error('删除连接失败')
  }
}

const switchConnection = async (id) => {
  try {
    await connectionApi.testConnection(connections.value.find(c => c.id === id))
    ElMessage.success('切换连接成功')
  } catch (error) {
    ElMessage.error('切换连接失败')
  }
}

onMounted(() => {
  loadConnections()
})
</script>

<style scoped>
.connections-container {
  padding: 20px;
}

.connection-form {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style> 